<template>
  <view>
    <!-- 搜索组件 -->
    <view class="search-container">
    <my-search @myClick="gotoSearch"></my-search>
    </view>
   <!-- 轮播图 -->
   <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
     <swiper-item v-for="item in swiperList" :key="item.goods_id">
       <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
         <image :src="item.image_src" ></image>
       </navigator>
     </swiper-item>
   </swiper>
   <!-- 首页分类 -->
   <view class="cateList">
     <navigator class="pic" v-for="(item,index) in catitemsList" :key="index" @click="cateHandler(item)">
       <image :src="item.image_src" mode="aspectFit"></image>
     </navigator>
   </view>
   <!-- 楼层区 -->
   <view class="floorList">
     <view class="floor-item" v-for="(item,index) in floorList" :key="index" >
       <!-- 楼层头部标题 -->
       <view class="top">
         <image :src="item.floor_title.image_src" mode="heightFix"></image>
       </view>
       <view class="footer">
         <!-- 左侧 -->
      <navigator class="item-pic-left" :url="item.product_list[0].url">
        <image
          :src="item.product_list[0].image_src" 
          :style="{ width:item.product_list[0].image_width+'rpx' }"
          mode="widthFix"
        ></image>
      </navigator>
      <!-- 右侧 -->
      <view class="item-pic-right">
        <navigator class="right-pic"  
          v-for="(obj,i2) in filterImageList[index]"  
          :key="i2"
          :url="obj.url">
        <image 
         :src="obj.image_src" 
         :style="{ width:obj.image_width+'rpx' }"
         mode="widthFix"
        ></image>
        </navigator>
      </view>
       </view>
     </view>
   </view>
  </view>
</template>

<script>
  // 导入首页接口
  import { getSwiperList,getCatitems,getfloorData } from '@/api/home.js'
  import  tabbarBadge  from '@/mixins/tabbar-badge.js'
  export default {
   mixins:[tabbarBadge],
    data() {
      return {
        swiperList:[],
        catitemsList:[],
        floorList:[]
      };
    },
    onLoad() {
      this.getSwiperList()
      this.getCatitems()
      this.getFoolrList()
    },
    computed:{
      // 排除掉第一个
      filterImageList() {
        // 必须序列化一下否则不能枚举
        let list = JSON.parse(JSON.stringify(this.floorList))
        return list.map(item => item.product_list.filter((obj,index) => index > 0 ? obj : false ))
      }
    },
    methods:{
      // 获取轮播图数据
    async  getSwiperList() {
      const { data } = await  getSwiperList()
      // console.log(data);
      if(data.meta.status !== 200) {
        return uni.$showMsg()
      }
      // 请求成功
      this.swiperList = data.message
       // return uni.$showMsg('数据请求成功！')
      },
      // 获取首页分类列表数据
    async getCatitems() {
        const { data } =  await getCatitems()
        if(data.meta.status !== 200) return uni.$showMsg()
        // console.log(data);
        this.catitemsList = data.message
      },
      // 点击跳转分类
      cateHandler(item) {
        // console.log(item);
        if(item.name === '分类') {
        uni.switchTab({
          url:'/pages/cate/cate'
        })
        }
      },
    async getFoolrList() {
      const { data } = await getfloorData()
      if(data.meta.status !== 200) return uni.$showMsg()
      // 处理跳转的路径
      data.message.forEach(item => {
        item.product_list.forEach(obj => {
          obj.url = '/subpkg/goods_list/goods_list?'+ obj.navigator_url.split('?')[1]
        })
      })
      this.floorList = data.message
      // console.log(data);
      // console.log(this.filterImageList);
    },
    gotoSearch() {
      uni.navigateTo({
        url:'../../subpkg/search/search'
      })
    }
      

    }
  }
</script>

<style scoped lang="scss">
  .search-container {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }
  swiper {
    height: 330rpx;
  .swiper-item {
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  }
  .cateList{
    display: flex;
    justify-content: space-between;
    margin: 25rpx 0;
    .pic {
      width: 25%;
      height: 150rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .floor-item {
    .top {
      width: 100%;
      height: 80rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .footer {
      display: flex;
      padding: 10rpx 0 0 10rpx;
      justify-content: space-between;
     .item-pic-right {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       margin-left: 15rpx;
       .right-pic:nth-child(2n) {
         margin-left: 20rpx;
       }
     }
    }
  }
</style>
